<template>
    <div class="management-less">
        <el-form :inline="true" :model="formInline" class="demo-form-inline t-a-l">
            <el-form-item label="姓名：">
                <el-input v-model="formInline.entity.user.name" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="手机号：">
                <el-input v-model="formInline.entity.user.phone" placeholder=""></el-input>
            </el-form-item>
            <!-- <el-form-item label="英文名：">
                <el-input v-model="formInline.enName" placeholder=""></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="考期：">
                <el-input v-model="formInline.user" placeholder=""></el-input>
            </el-form-item> -->
            <el-form-item label="科目：">
                <el-select v-model="formInline.entity.subjectsId" placeholder="全部">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option v-for="(item,index) in selectSubjects" :key="index" :label="item.chName" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="resultsList">搜索</el-button>
                <el-button class="reset" @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="export-less">
            <el-button type="primary">Excel导入</el-button>
            <input class="input-file" type="file" @change="onSubmit($event)">
            <a style="margin-left:20px; color:bule;" href="http://114.116.114.219:8080/file/template/grade_import_template.xlsx">下载示例</a>
        </div>
        <div class="border-s my-test">
            <el-table :data="tableData" style="width: 100%" :border="false">
                <el-table-column prop="user.name" label="姓名"></el-table-column>
                <el-table-column prop="user.sex" label="性别" :formatter="sexFormatter"></el-table-column>
                <el-table-column prop="user.phone" label="手机号"></el-table-column>
                <el-table-column prop="examination.examTime" label="考试时间"></el-table-column>
                <el-table-column prop="examination.name" label="考试名称"></el-table-column>
                <el-table-column prop="status" label="状态" :formatter="statusFormatter"></el-table-column>
                <el-table-column prop="grade" label="分数"></el-table-column>
                <el-table-column prop="certificate" label="证书">
                    <template slot-scope="scope" v-if="scope.row.certificate != null">
                        <img :src="$imgPath(scope.row.certificate)" alt="" style="width: 50px;height: 50px;border-color:transparent;">
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope" class="aaaa">
                        <span @click="confirm(scope.row)"  class="button-my-test"> 上传证书<input type="file" name="" id="" ref="avatarInput1" @change="changeImage($event,scope.row.id)"></span>
                        <span @click="ruleForm.id = scope.row.id,dialogVisible = true"  class="button-my-test">修改成绩</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="formInline.pageable.size"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="pageFy"
            :total="total">
            </el-pagination>
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        class="demo-ruleForm"
        width="25%"
        center>
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
                <el-form-item label="修改成绩" prop="name">
                    <el-input v-model="ruleForm.grade" class="inputGrade" @input="handleInput($event)"></el-input>
                </el-form-item>
                <el-form-item label="是否通过" prop="pass">
                    <el-radio-group v-model="ruleForm.pass">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false,updategrade()">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    data(){
        return{
            formInline: {
                entity:{
                    user:{
                        name:"",
                        phone:''
                    },
                    subjectsId:'',
                    enName:'',
                    status:5
                },
                pageable:{
                    current:1,
                    size:10
                },
            },
            formInline1: {
                conditions:[],
                pageable:{
                    current:1,
                    size:100
                },
            },
            tableData:[],
            centerDialogVisible:false,
            rejected:{
                message:''
            },
            total:0,
            selectSubjects:[],
            dialogVisible:false,
            ruleForm:{
                id:'',
                pass:true
            }
        }
    },
    mounted(){
        this.resultsList()
        this.subjectList()
    },
    methods:{
        // 重置搜索内容
        reset(){
            this.formInline.entity.user.name = ''
            this.formInline.entity.user.phone = ''
            this.formInline.entity.subjectsId = null
            this.resultsList()
        },
        handleInput(e){
            this.ruleForm.grade = e.replace(/[^\d]/g,'')
            if(this.ruleForm.grade < 0){
                this.ruleForm.grade = 1
            }
        },
        // 获取成绩列表
        resultsList(){
            apiHttp.apiIndex.sigupPage(this.formInline).then(resp=>{
                if(resp.code == 0){
                    this.tableData = resp.data.records
                    this.total = Number(resp.data.total)
                }
            })
        },
        handleCurrentChange(val){
            this.formInline.pageable.current = val
            this.resultsList()
        },
        pageFy(val){
            this.formInline.pageable.size = val
            this.resultsList()
        },
        // 性别过滤器
        sexFormatter(row){
            return row.user.sex == 0 ? '女' : '男'
        },
        // 状态过滤器
        statusFormatter(row){
            if(row.status == 0){
                return '未审核'
            }else if(row.status == 1){
                return '机构审核'
            }else if(row.status == 2){
                return '协会审核'
            }else if(row.status == 3){
                return '已缴费'
            }else if(row.status == 4){
                return '已排场'
            }else if(row.status == 5){
                return '已通过'
            }else if(row.status == 6){
                return '未通过'
            }
        },
        // 上传图片
        changeImage(e,id){
            let fd = new FormData()
            fd.append('module','cert')
            if (e.target.files[0].length !== 0) {
                fd.append('file', e.target.files[0])
            }
            apiHttp.apiIndex.uploadImg(fd).then(resp=>{
                if(resp.code == 0){
                    let parmes = {
                        certificateUrl:resp.data,
                        id:id
                    }
                    apiHttp.apiIndex.uploadCertificate(parmes).then(res => {
                        if(res.code == 0){
                            this.$message({
                                type: 'success',
                                message: '上传成功!'
                            });
                            this.resultsList()
                        }
                    })
                }
            })
        },
        // 获取科目列表
        subjectList(){
            apiHttp.apiIndex.subjects(this.formInline1).then(resp=>{
                if(resp.code == 0){
                    this.selectSubjects = resp.data.records
                }
            })
        },
        // 导入
        onSubmit(e){
            let fd = new FormData()
            if (e.target.files[0].length !== 0) {
                fd.append('file', e.target.files[0])
            }
            apiHttp.apiIndex.gradeimport(fd).then(resp=>{
                if(resp.code == 0){
                    this.$message({
                        message: '导入成功',
                        type: 'success'
                    })
                    this.resultsList()
                }
            })
        },
        // 通过
        updategrade() {
            apiHttp.apiIndex.orderUpdateGrade(this.ruleForm).then(resp =>{
                if(resp.code == 0){
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    })
                    this.resultsList()
                }
            })
        }
    }
}
</script>
<style lang="less">
.management-less{
    .el-form{
        .el-form-item{
            .el-form-item__content{
                .el-button--primary{
                    background-color: #5d2805;
                    border-color: #5d2805;
                }
            }
        }
    }
    .export-less{
        text-align: left;
        margin-bottom: 15px;
        position: relative;
        .jiafei{
            display: block;
            margin-top: 15px;
        }
        .input-file{
            position: absolute;
            left: 0;
            top: 0;
            width: 108px;
            height: 40px;
            display: inline-block;
            opacity: 0;
            z-index: 99;
        }
    }
    .el-table th{
        color: #fff;
        background-color: #5d2805;
    }
    .el-table td, .el-table th{
        text-align: center;
        font-size: 16px;
    }
    .rejected{
        .el-dialog__body{
            padding: 25px 25px 10px;
            .el-form-item__label{
                display: none;
            }
            .el-form-item__content{
                margin-left: 0 !important;
            }
        }
        .el-dialog__footer{
            .el-button--primary{
                background-color: #5d2805;
                border-color: #5d2805;
            }
            .el-button--default:hover{
                background-color: #e4d7cf;
                border-color: #e4d7cf;
                color: #5d2805;
            }
        }
        .el-textarea__inner{
            min-height: 100px !important;
        }
    }
    .button-my-test{
        // width:100px;
        // height: 50px;
        position: relative;
        font-size: 14px;
        border-radius: 5px;
        cursor: pointer;
        input{
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            z-index: 99;
            cursor: pointer;
            display: block;
            width: 100%;
            height: 100%;
        }
    }
}
.inputGrade{
    width: 85%;
}
.el-message-box__message{
    font-size: 18px;
}
.el-table .cell{
    overflow:visible;
}
.demo-ruleForm{
    .el-dialog{
        .el-dialog__header{
            text-align: left;
        }
        .el-dialog__body{
            padding-bottom: 5px;
        }
        .el-dialog__footer{
            text-align: right;
        }
    }
}
</style>

